<template>
    <div class="container">
        <!-- 柱状图 -->
        <div class="echartsItem" ref="screen1" style="width: 500px;height: 350px;" id="test">
        </div>
        <!-- 折线图 -->
        <div class="echartsItem" ref="screen2" style="width: 800px;height: 350px;" id="test">
        </div>
        <!-- 环形图 -->
        <div class="echartsItem" ref="screen3" style="width: 800px;height: 350px;" id="test">

        </div>
        <!-- 折现堆叠柱状混合图 -->
        <div class="echartsItem" ref="screen4" style="width: 800px;height: 350px;" id="test">
        </div>

        <!-- echarts组件 -->
        <div class="firstFloor" v-for="(item, index) in finalData" :key="index">
            <div class="secondFloor" v-for="(itemChart, i) in item" :key="i">
                <CurrencyChart :options="itemChart.options" />
            </div>
        </div>

        <CurrencyChart :options="testData" />
    </div>
</template>

<script setup lang='ts'>
// 引入echarts
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
// 引入图表的数据
import primaryData from './config/data.json'
import { chartTypeMap } from './utils/indicatorsSummary'
import theme from './config/theme.json'
import CurrencyChart from './currencyChart.vue'
// 定义变量存储做种需要展示的数据
let finalData = ref<Array<any>>([])

let testData = ref({
    title: {
        text: 'Stacked Area Chart 折线堆叠柱状图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        top: '20%',
        left: '0',
        data: ['车型产量', '硬件单价', '软件单价', '搭载量', '搭载量调整', '销售额', '搭载量调整2', '搭载量调整1'],
        // symbolRotate:'inherit'
        orient: 'vertical'
    },
    toolbox: {
        // 用于展示或者隐藏下载的标志
        show: false,
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '20%',
        right: '6%',
        bottom: '3%',
        containLabel: true,
    },
    xAxis: [
        {
            name: '年份',
            type: 'category',
            boundaryGap: true,
            data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '车型产量',
            type: 'bar',
            // stack: 'Up',
            // 用来设置折线图的下半部分是否需要颜色填充的
            areaStyle: {},

            emphasis: {
                focus: 'series'
            },
            label: {
                show: true,
                position: 'top'
            },
            data: [0, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '硬件单价',
            type: 'bar',
            stack: 'Up',
            // areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            label: {
                show: true,
                position: 'top'
            },
            data: [0, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '软件单价',
            type: 'bar',
            stack: 'Up',
            // areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            label: {
                show: true,
                position: 'top'
            },
            data: [0, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '搭载量',
            type: 'bar',
            stack: 'Up',
            // areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            label: {
                show: true,
                position: 'middle'
            },
            data: [0, 240, 180, 160, 250, 310, 350]
        },
        {
            name: '销售额',
            type: 'bar',
            stack: 'Up',
            // areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            label: {
                show: true,
                position: 'top'
            },
            data: [0, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搭载量调整',
            type: 'line',
            stack: 'Total',
            // 显示每个点的数量是多少
            label: {
                show: true,
                position: 'top'
            },
            // areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [0, 932, 901, 934, 1290, 1330, 1320]
        },
        {
            name: '搭载量调整2',
            type: 'bar',
            stack: 'Te',
            // 显示每个点的数量是多少
            label: {
                show: true,
                position: 'top'
            },
            barWidth: 5,
            // areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [0, 932, 901, 934, 1290, 1330, 1320]
        },
        {
            name: '搭载量调整1',
            type: 'bar',
            stack: 'Te',
            // 显示每个点的数量是多少
            label: {
                show: true,
                position: 'top'
            },
            barWidth: 5,
            // areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [0, 932, 901, 934, 1290, 1330, 1320]
        },

    ]
})


// 柱状图的舞台
let screen1 = ref(null)
// 折线图的舞台
let screen2 = ref(null)
// 环形图的舞台
let screen3 = ref(null)
// 折先堆叠柱状混合图形图的舞台
let screen4 = ref(null)

// 定义一个函数用于获取到配置项的信息(针对的是环形图，柱状图，折线图，以及柱状折线的综合)
const getEchartsOptions = (echartsData: any) => {
    return echartsData.map((item) => {
        return item.map((data, index) => {
            if (chartTypeMap.has(data.type)) {
                if (data.type === 'ring') {
                    console.log('这是环的数据', data);

                    return {
                        ...data,
                        options: chartTypeMap.get(data.type)!(data, (series) => {
                            series[0].data[0].itemStyle.color = theme.color[index];
                            return series;
                        }),
                    };
                } else if (data.type === 'lineBarMixed') {
                    return {
                        ...data,
                        options: chartTypeMap.get(data.type)!(data),
                    };
                } else if (data.type === 'line') {
                    return {
                        ...data,
                        // chartTypeMap.get(data.type) 意思是去chartTypeMap对象当中获取到对应某种图表的类型的函数
                        // 这其中的'!',表示函数的返回值一定不为null或者undefined
                        options: chartTypeMap.get(data.type)!(data, (series) => {
                            series[0].itemStyle = {
                                color: theme.color[index],
                            };
                            series[0].areaStyle.color.colorStops = series[0].areaStyle.color.colorStops.map(
                                (ele, i) => {
                                    return {
                                        ...ele,
                                        color: i ? theme.color[index] + '00' : theme.color[index],
                                    };
                                },
                            );
                            return series;
                        }),
                    };
                } else {
                    return {
                        ...data,
                        options: chartTypeMap.get(data.type)!(data),
                    };
                }
            }
            return data;
        });
    });
}

onMounted(() => {
    //#region 
    // finalData.value = primaryData.map((item) => {
    //     return item.map((data, index) => {
    //         if (chartTypeMap.has(data.type)) {
    //             if (data.type === 'ring') {
    //                 console.log('这是环的数据',data);

    //                 return {
    //                     ...data,
    //                     options: chartTypeMap.get(data.type)!(data, (series) => {
    //                         series[0].data[0].itemStyle.color = theme.color[index];
    //                         return series;
    //                     }),
    //                 };
    //             } else if (data.type === 'lineBarMixed') {
    //                 return {
    //                     ...data,
    //                     options: chartTypeMap.get(data.type)!(data),
    //                 };
    //             } else if (data.type === 'line') {
    //                 return {
    //                     ...data,
    //                     // chartTypeMap.get(data.type) 意思是去chartTypeMap对象当中获取到对应某种图表的类型的函数
    //                     // 这其中的'!',表示函数的返回值一定不为null或者undefined
    //                     options: chartTypeMap.get(data.type)!(data, (series) => {
    //                         series[0].itemStyle = {
    //                             color: theme.color[index],
    //                         };
    //                         series[0].areaStyle.color.colorStops = series[0].areaStyle.color.colorStops.map(
    //                             (ele, i) => {
    //                                 return {
    //                                     ...ele,
    //                                     color: i ? theme.color[index] + '00' : theme.color[index],
    //                                 };
    //                             },
    //                         );
    //                         return series;
    //                     }),
    //                 };
    //             } else {
    //                 return {
    //                     ...data,
    //                     options: chartTypeMap.get(data.type)!(data),
    //                 };
    //             }
    //         }
    //         return data;
    //     });
    // });
    //#endregion
    finalData.value = getEchartsOptions(primaryData)
    if (screen1.value) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(screen1.value);
        // 绘制图表
        myChart.setOption({
            title: {
                text: '柱状图'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Test']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130, 510],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        });
    }
    if (screen2.value) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(screen2.value);
        // 绘制图表
        myChart.setOption({
            title: {
                text: 'Stacked Area Chart 折线图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                top: '20%',
                left: '0',
                data: ['车型产量', '硬件单价', '软件单价', '搭载量', '搭载量调整', '销售额'],
                // symbolRotate:'inherit'
                orient: 'vertical'
            },
            toolbox: {
                // 用于展示或者隐藏下载的标志
                show: false,
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '20%',
                right: '6%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: [
                {
                    name: '年份',
                    type: 'category',
                    boundaryGap: true,
                    data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '车型产量',
                    type: 'line',
                    stack: 'Total',
                    // 用来设置折线图的下半部分是否需要颜色填充的
                    areaStyle: {},

                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    data: [0, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '硬件单价',
                    type: 'line',
                    stack: 'Total',
                    // areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    data: [0, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '软件单价',
                    type: 'line',
                    stack: 'Total',
                    // areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    data: [0, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '搭载量',
                    type: 'line',
                    stack: 'Total',
                    // areaStyle: {},
                    // emphasis: {
                    //     focus: 'series'
                    // },
                    label: {
                        show: true,
                        position: 'middle'
                    },
                    data: [0, 240, 180, 160, 250, 310, 350]
                },
                {
                    name: '销售额',
                    type: 'line',
                    stack: 'Total',
                    // areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    data: [0, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '搭载量调整',
                    type: 'line',
                    stack: 'Total',
                    // 显示每个点的数量是多少
                    label: {
                        show: true,
                        position: 'top'
                    },
                    // areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [0, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        })
    }
    if (screen3.value) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(screen3.value);
        // 绘制图表
        myChart.setOption({
            title: {
                text: '环状图'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    // name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold'
                        }
                    },
                    // 展示线条
                    labelLine: {
                        show: true
                    },
                    data: [
                        { value: 1048, name: '外包成本' },
                        { value: 735, name: '服务器租赁' },
                        { value: 580, name: '各种配件费用' },
                        { value: 484, name: '人力成本' },
                        { value: 300, name: '非人力成本' }
                    ]
                }
            ]
        })
    }
    if (screen4.value) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(screen4.value);
        // 绘制图表
        myChart.setOption({
            title: {
                text: 'Stacked Area Chart 折线堆叠柱状图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                top: '20%',
                left: '0',
                data: ['车型产量', '硬件单价', '软件单价', '搭载量', '搭载量调整', '销售额', '搭载量调整2', '搭载量调整1'],
                // symbolRotate:'inherit'
                orient: 'vertical'
            },
            toolbox: {
                // 用于展示或者隐藏下载的标志
                show: false,
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '20%',
                right: '6%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: [
                {
                    name: '年份',
                    type: 'category',
                    boundaryGap: true,
                    data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '车型产量',
                    type: 'bar',
                    // stack: 'Up',
                    // 用来设置折线图的下半部分是否需要颜色填充的
                    areaStyle: {},

                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    data: [0, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '硬件单价',
                    type: 'bar',
                    stack: 'Up',
                    // areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    data: [0, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '软件单价',
                    type: 'bar',
                    stack: 'Up',
                    // areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    data: [0, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '搭载量',
                    type: 'bar',
                    stack: 'Up',
                    // areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'middle'
                    },
                    data: [0, 240, 180, 160, 250, 310, 350]
                },
                {
                    name: '销售额',
                    type: 'bar',
                    stack: 'Up',
                    // areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    data: [0, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '搭载量调整',
                    type: 'line',
                    stack: 'Total',
                    // 显示每个点的数量是多少
                    label: {
                        show: true,
                        position: 'top'
                    },
                    // areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [0, 932, 901, 934, 1290, 1330, 1320]
                },
                {
                    name: '搭载量调整2',
                    type: 'bar',
                    stack: 'Te',
                    // 显示每个点的数量是多少
                    label: {
                        show: true,
                        position: 'top'
                    },
                    barWidth: 5,
                    // areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [0, 932, 901, 934, 1290, 1330, 1320]
                },
                {
                    name: '搭载量调整1',
                    type: 'bar',
                    stack: 'Te',
                    // 显示每个点的数量是多少
                    label: {
                        show: true,
                        position: 'top'
                    },
                    barWidth: 5,
                    // areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [0, 932, 901, 934, 1290, 1330, 1320],
                    markLine: {
                        lineStyle: {
                            type: 'dashed'
                        },
                        label:{
                            show:true,
                            formatter:(params)=>{
                                console.log('标记',params[0]);
                                
                            }
                        },
                        data: [[{ type: 'min' }, { type: 'max' }]]
                    }
                },

            ]
        })
    }

    console.log('打印最终的数据', finalData.value);

})
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    /* overflow: scroll; */

    .echartsItem {
        margin: 16px;
    }

    .firstFloor {
        width: 100%;
        /* height: 800px; */
        overflow: hidden;
        box-sizing: border-box;
        padding: 50px;

        .secondFloor {
            width: 100%;
            height: 500px;
            /* background-color: #666; */
            margin-top: 200px;
        }
    }
}
</style>